<template>
	<div class="wrap">
		<!-- <el-table
			:data="tableData"
			border
			:height="`calc(100vh - 150px)`"
			:summary-method="getSummaries"
			show-summary
			style="width: 100%; margin-top: 20px"
		>
			<el-table-column prop="id" label="ID" width="180" />
			<el-table-column prop="name" label="Name" />
			<el-table-column prop="amount1" label="Cost 1 ($)" />
			<el-table-column prop="amount2" label="Cost 2 ($)" />
			<el-table-column prop="amount3" label="Cost 3 ($)" />
		</el-table> -->

		<el-skeleton style="width: 400px;height: 400px;" :loading="loading" animated>
			<div class="card" v-for="i in carArr" :key="i"></div>
			{{ i }}
		</el-skeleton>
	</div>
</template>

<script setup>
import { reactive, ref, h, watch, onMounted } from 'vue'
import { getUsers } from '@/hooks/user'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import dayjs from 'dayjs'
const loading = ref(true)
const state = reactive({})

const tableData = [
	{
		id: '12987122',
		name: 'Tom',
		amount1: '234',
		amount2: '3.2',
		amount3: 10
	},
	{
		id: '12987123',
		name: 'Tom',
		amount1: '165',
		amount2: '4.43',
		amount3: 12
	},
	{
		id: '12987124',
		name: 'Tom',
		amount1: '324',
		amount2: '1.9',
		amount3: 9
	},
	{
		id: '12987125',
		name: 'Tom',
		amount1: '621',
		amount2: '2.2',
		amount3: 17
	},
	{
		id: '12987126',
		name: 'Tom',
		amount1: '539',
		amount2: '4.1',
		amount3: 15
	}
]
// console.log("getUsers",getUsers);
const { getUserlist } = getUsers()

const carArr = ref([])

// const res = await getUserlist()
// console.log("res",res);

// onMounted( () => {
// 	// const res = await axios.post('/src/data/yunhan.json')
// 	// console.log("res",res);
// 	// const res = await getUserlist()
// 	// console.log('res', res)

// 	getUserlist().then(res => {
// 		console.log("res",res);
// 	})
// })

// console.log(dayjs('20241022').format('YYYY-MM-DD HH:mm'));

onMounted(async () => {
	const {
		data: { data: user }
	} = await axios.get('/src/data/user.json')
	// console.log('res',user instanceof Array);
	carArr.value = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王']
	loading.value = false
})
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	height: calc(100vh - 300px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	.card {
		width: 400px;
		height: 400px;
		text-align: center;
		line-height: 400px;
		border-radius: 10px;
		border: 1px solid #008c8c;
		font-size: 48px;
		font-weight: 900;
		color: #008c8c;
	}
}
</style>
